<!--营销管理-->
<template>
  <div class="main">
    <div class="info-container">
      <div class="info-container_body">
        <el-form ref="refFrom" label-position="top" class="demo" v-loading="loading">
          <!-- <div class="form-section">
            <div class="form-section_title">活动类型</div>

          </div>-->
          <el-form-item label="活动类型" v-show="item.activityId==null">
            <el-radio-group v-model="item.coupon.couponType">
              <el-radio v-for="item in type" :key="item.value" :label="item.value">
                {{
                item.label
                }}
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="活动名称">
            <el-input v-model="item.activityName" />
          </el-form-item>

          <!--积分-->
          <div v-if="item.coupon.couponType == '0'">
            <el-form-item label="积分比例（实付金额与积分的计算关系）">
              <el-input-number :min="0"  v-model="item.points.exchangeRate" />
            </el-form-item>
            <el-form-item label="核销比例（积分与支付时的抵用计算关系）">
              <el-input-number :min="0" v-model="item.points.discountRate" />
            </el-form-item>
          </div>

          <!--优惠-->
          <div v-else-if="item.coupon.couponType == '1'">
            <el-row>
              <el-col :span="24">
                <el-form-item label="优惠劵类型">
                  <el-select v-model="item.coupon.optionsBo.cash.cashType" placeholder="优惠劵类型">
                    <el-option v-for="item in couponType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="item.coupon.optionsBo.cash.cashType == 1">
              <el-col :span="24">
                <el-form-item label="指定金额(元)">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.optionsBo.cash.denomination" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="11">
                <el-form-item label="指定金额下限（元）">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.optionsBo.cash.randomFloorAmount" />
                </el-form-item>
              </el-col>

              <el-col :span="2"></el-col>
              <el-col :span="11">
                <el-form-item label="指定金额上限（元）">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.optionsBo.cash.randomRoofAmount" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="发行总张数">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.totalQuantity" />
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="11">
                <el-form-item label="同账号可领取张数">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.claimCount" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="发放比例">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.distributionRatio" />
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="11">
                <el-form-item label="领取间隔（秒）">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.redemptionPeriod" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="券有效期时间起止">
                  <el-date-picker
                    v-model="item.valids"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD hh:mm:ss"
                    value-format="YYYY-MM-DD hh:mm:ss"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!--满减-->
          <div v-else-if="item.coupon.couponType == '2'">
            <div v-for="(discount,index) in item.coupon.optionsBo.discounts" :key="index">
              <div style="height:30px">
                <el-row>
                  <el-col :span="20">
                    <el-form-item :label="'满减条件'+(index+1)"> </el-form-item>
                  </el-col>
                  <el-col :span="4" v-if="index==0">
                    <el-button link type="primary" icon="el-icon-plus" @click="addDiscount()"
                      ><el-icon><Plus /></el-icon>添加</el-button
                    >
                  </el-col>
                  <el-col :span="4" v-else>
                    <el-button link type="danger" icon="el-icon-delete" @click="delDiscount(index)"
                      ><el-icon><Delete /></el-icon>删除</el-button
                    >
                  </el-col>
                </el-row>
              </div>
              <div style="padding:10px;background:#F6F7FB">
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="实付金额(元)">
                      <el-input-number min="0" max="10000000" v-model="discount.minOrderAmount" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="2"></el-col>
                  <el-col :span="11">
                    <el-form-item label="优惠金额(元)">
                      <el-input-number min="0" max="10000000" v-model="discount.discountAmount" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>

            <el-row>
              <el-col :span="11">
                <el-form-item label="发行总张数">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.totalQuantity" />
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="11">
                <el-form-item label="同账号可领取张数">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.claimCount" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="领取间隔（秒）">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.redemptionPeriod" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="券有效期时间起止">
                  <el-date-picker
                    v-model="item.valids"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD hh:mm:ss"
                    value-format="YYYY-MM-DD hh:mm:ss"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!--体验-->
          <div v-else-if="item.coupon.couponType=='3'">
            <el-row>
              <el-col :span="24">
                <el-form-item label="体验时长（分钟）">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.optionsBo.experience.durationMs" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="发行总张数">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.totalQuantity" />
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="11">
                <el-form-item label="同账号可领取张数">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.claimCount" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="发放比例">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.distributionRatio" />
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="11">
                <el-form-item label="领取间隔（秒）">
                  <el-input-number min="0" max="10000000" v-model="item.coupon.redemptionPeriod" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="券有效期时间起止">
                  <el-date-picker
                    v-model="item.valids"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD hh:mm:ss"
                    value-format="YYYY-MM-DD hh:mm:ss"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <el-row>
            <el-col :span="24">
              <el-form-item label="可用对象">
                <AllRegion ref="allRegion" v-model="item.regions"></AllRegion>
                <span v-if="item.scope==1">全局</span>
                <span v-for="(region,index) in item.activityVendors" :key="index">&nbsp;{{region.vendorName}}</span>
                <span v-for="(region,index) in item.activityRegions" :key="index">&nbsp;{{region.regionName}}</span>
                <!-- item.activityRegions -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="可用范围">
                <el-select v-model="item.orderType" placeholder="可用范围">
                  <el-option v-for="item in orderType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="活动时间起止">
            <el-date-picker
              v-model="item.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD hh:mm:ss"
              value-format="YYYY-MM-DD hh:mm:ss"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { getActivity, addActivity, updateActivity } from '@/api/operation/activity/index';
import AllRegion from '@/components/RegionSelect/allRegion.vue';
import common from '@/utils/common.ts';

export default {
  props: {
    data: {}
  },
  data() {
    return {
      loading: false,
      item: JSON.parse(JSON.stringify(common.operActivity.defaultActivity)),
      type: [
        { label: '优惠', value: '1' },
        { label: '积分', value: '0' },
        { label: '满减', value: '2' },
        { label: '体验', value: '3' }
      ],
      couponType: [
        { label: '定额', value: '1' },
        { label: '随机', value: '2' }
      ],
      orderType: [
        { label: '全局', value: '1' },
        { label: '吸氧', value: '2' },
        { label: '充灌', value: '3' }
      ]
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let defaultItem = JSON.parse(JSON.stringify(common.operActivity.defaultActivity));
      let id = this.data.activityId;

      if (id == null) {
        this.item = defaultItem;
      } else {
        this.loading = true;
        getActivity(id).then((res) => {
          this.loading = false;
          let data = res.data;
          data = common.operActivity.verifyDataIntegrity(defaultItem, data);
          console.log(data);
          this.item = data;
          this.$nextTick(() => {
            this.$refs.allRegion.init();
          });
        });
      }
    },

    handleSave() {
      let item = JSON.parse(JSON.stringify(this.item));

      item.coupon.optionsBo.cash.denomination *= 100;
      item.coupon.optionsBo.cash.randomFloorAmount *= 100;
      item.coupon.optionsBo.cash.randomRoofAmount *= 100;
      item.coupon.optionsBo.discounts[0].minOrderAmount *= 100;
      item.coupon.optionsBo.discounts[0].discountAmount *= 100;

      let regions = item.regions;

      //可用区域
      item.activityRegions = [];
      item.activityVendors = [];
      regions.forEach((region) => {
        let scope = region[0];
        item.scope = scope;

        if (scope == 1) {
        } else if (scope == 3) {
          let id = region[region.length - 1];
          item.activityRegions.push({
            regionCode: id
          });
        } else if (scope == 2) {
          //酒店
          let id = region[region.length - 1];
          item.activityVendors.push({
            vendorId: id
          });
        }
      });

      //优惠过期时间
      if (item.valids.length == 2) {
        item.coupon.validFrom = item.valids[0];
        item.coupon.validTo = item.valids[1];
      }

      //活动过期时间
      if (item.time.length == 2) {
        item.startTime = item.time[0];
        item.endTime = item.time[1];
      }

      if (item.coupon.couponType == '0') {
        item.activityType = '2';
      } else {
        item.activityType = '1';
      }

      this.loading = true;
      if (item.activityId == null) {
        addActivity(item)
          .then((res) => {
            this.loading = false;
            if (res.code == 200) {
              //todo:
              this.$emit('hideRight');
            } else {
              ElMessage.error(res.msg);
            }
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        item.qrCodeImgBase64 = null;
        updateActivity(item)
          .then((res) => {
            this.loading = false;
            if (res.code == 200) {
              //todo:
              this.$emit('hideRight');
            } else {
              ElMessage.error(res.msg);
            }
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
    handleCancel() {
      this.$emit('hideRight');
    },

    addDiscount() {
      this.item.coupon.optionsBo.discounts.push({
        minOrderAmount: 1,
        discountAmount: 0
      });
    },
    delDiscount(index) {
      this.item.coupon.optionsBo.discounts.splice(index, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  .contentFrm {
    padding: 10px;
    background: #f6f7fb;
  }

  .el-input-number__decrease,
  .el-input-number__increase {
    display: none;
  }

  .el-input-number {
    width: 100%;
  }
}
</style>
